/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="data-space__warp">
        <p class="data-space__title">数据空间</p>
        <div class="data-space__body">
            <div v-if="!dataSpaceIsEmpty">
                <span class="data-space__label m-l5"> 总容量: <span class="m-l20">{{dataSpace.totalCapacity}}</span>G </span>
                <div class="data-space__chart">
                    <sf-e-charts
                        ref="myChart"
                        :options="defaultOption"
                        :auto-destroy="false"
                        :auto-refresh="true"
                        class="pie"></sf-e-charts>
                    <span class="chart__text">
                        <span><i class="chart__icon" style="background-color: #1062FF" /> {{ _('已使用') }} <span class="m-l15">{{dataSpace.usedCapacity}}</span>G</span>
                        <span><i class="chart__icon" style="background-color: #EBEBEB"/> {{ _('未使用')}}  <span class="m-l15">{{dataSpace.remainingCapacity}}</span>G</span>
                    </span>
                </div>
                <div class="dataSpace-dataset">
                    <div style="display: flex; align-items: center">
                        <img src="../img/shujujiguanli.svg" alt="shujujiguanli">
                        <lang class="dataSpace-dataset__label">数据集存入:</lang>
                    </div>
                    <lang
                        :class="[dataSpace.datasetUsed >= dataSpace.datasetCapacity?'dataSpace-dataset__number dataSpace-dataset--fill':'dataSpace-dataset__number']">
                        {{ dataSpace.datasetUsed }}/{{ dataSpace.datasetCapacity }}个
                    </lang>
                </div>
            </div>
            <empty-panel v-else :title="_('暂无数据')"/>
        </div>
    </div>
</template>

<style lang="less" scoped>
.data-space__warp {
    width: 32%;
    height: 330px;
    position: relative;
    padding: 15px 30px 30px 30px;
    background-color: #fff;
    border-radius: 6px;

    .data-space__title {
        font-size: 14px;
        font-weight: bold;
    }
    .data-space__body {
        .data-space__label {
            color: #999999;
            height: 30px;
            line-height: 30px;
        }
        .data-space__chart {
            height: 112px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 36px;


            .chart__icon {
                display: inline-block;
                width: 6px;
                height: 6px;
                border-radius: 50%;
                margin-right: 16px;
            }
            .chart__text {
                display: flex;
                width: 200px;
                flex-direction: column;
                align-items: self-start;
                color: #999999;
                >span {
                    display: flex;
                    align-items: center;
                    height: 27px;
                    margin: 5px 0;
                    line-height: 27px;
                }
            }
            .pie {
                width: 72px;
                height: 72px;
            }
        }
    }
    .dataSpace-dataset {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 42px;
        background-color: #F7F7F7;
        margin-top: 20px;
        padding: 0 18px;

        &__label {
            margin-left: 16px;
            color: #9B9B9B;
        }

        &__number {
            color: #9B9B9B;
        }

        &--fill {
            color: #FF6526;
        }

    }
}
</style>

<script>
import EmptyPanel from 'src/components/empty_panel.vue';


export default {
    components: {
        EmptyPanel
    },

    data(){
        return {
            myChart: null,
            dataSpace: {},
            dataSpaceIsEmpty: true,
            defaultOption: {},

        }
    },

    watch: {
        dataSpace: {
            deep: true,
            immediate: true,
            handler () {
                this.$nextTick().then(() => {
                    this.initData();
                });
            }
        }
    },

    mounted() {
        this.initDataSpace()
        this.myChart = this.$refs.myChart;
    },

    methods: {
        // 初始化数据
        initData () {
            this.seriesData = this._getSeriesData();
            let seriesData = this.seriesData;
            let vm = this;
            // 绘制图表
            this.defaultOption = {
                title: {
                    text: `${((this.dataSpace.usedCapacity / this.dataSpace.totalCapacity)*100).toFixed()}%`,
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        color: '#999999',
                        fontSize: '18'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter (data) {
                        let { seriesName, name, value } = data;
                        let { usedCapacity:user, remainingCapacity:noUser } = vm.dataSpace;

                        // 已使用和剩余均为0
                        if (user === 0 && user === noUser) {
                            value = 0;
                        }
                        return `${seriesName}<br/>${name} : ${value}`;
                    }
                },
                left: 0,
                yAxis: '50',
                series: [
                    {
                        type: 'pie',
                        name: _('使用情况'),
                        radius: ['88%', '66%'],
                        center: ['50%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            normal: {
                                show: false,
                                position: 'outside'
                            },
                            emphasis: {
                                show: false,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        color: ['#5F3BFF', '#eee'],
                        data: seriesData
                    }
                ]
            };

            this.onResize();
        },

        onResize () {
            let vm = this;
            if (vm.myChart && typeof this.myChart.resize === 'function') {
                vm.myChart?.resize();
            }
        },

        _getSeriesData(){
            let { usedCapacity, remainingCapacity } = this.dataSpace;
            const user = Number(usedCapacity)
            let noUser = Number(remainingCapacity)
            // 已使用和剩余均为0
            if (user === 0 && user === noUser) {
                noUser = 1;
            }
            return [
                { value: user, name: '已使用' },
                { value: noUser, name: '剩余' }
            ];;
        },

        async initDataSpace() {
            const res = await this.$ajax.get(`/ai-datalake/api/v1/dataspaces/resource/all`)
            let {success, data} = res;
            if (!success || data.totalCapacity === '0') {
                this.dataSpaceIsEmpty = true;
                return;
            }
            this.dataSpaceIsEmpty = false;
            this.dataSpace = data;
        },
    }
};

</script>
